import React, { memo, useEffect, useState } from 'react'
import { RightWrapper } from './styles'
import IconGlobal from '@/assets/svg/icon_global'
import IconMenu from '@/assets/svg/icon_menu'
import IconAvator from '@/assets/svg/icon_avator'

const HeaderRight = memo(() => {
  const [showPanel, setShowPanel] = useState(false);
  
  useEffect(()=>{
    function handleWindowClick (){
      setShowPanel(false)
    }
    window.addEventListener("click", handleWindowClick, true)
    return ()=>{
      window.removeEventListener("click", handleWindowClick, true)
    }
  }, [])

  // function profileClickHandle() {
  //   console.log(showPanel)
  //   setShowPanel(!showPanel)
  // }
  return (
    <RightWrapper>
      <div className="btns">
        <IconGlobal />
      </div>
      <div className='profile' onClick={() => setShowPanel(!showPanel)}>
        <IconMenu />
        <IconAvator />
        {
          showPanel && (
            <div className="panel">
              <div className="top">
                <div className="item">注册</div>
                <div className="item">登录</div>
                <div className="item">历史浏览记录</div>
              </div>
              <div className="bottom">
                <div className="item">帮助中心</div>
              </div>
            </div>)
        }
      </div>
    </RightWrapper>
  )
})

export default HeaderRight